iT邦幫忙

2024 iThome 鐵人賽

DAY 29
0

昨天介紹了JQuery DataTable套件,今天將接續介紹兩個實用的套件~

JQuery FullCalendar套件

JQuery FullCalendar是由JavaScript所編寫的行事曆,功用是能嵌入網頁提供使用者查看日期,而且嵌入與調整方式簡單,有多種行事曆顯示方式供選擇,以下為其使用方法:

  1. 嵌入
    利用下載或CDN或npm,三種方法擇一即可。
  2. 設定行事曆 <div> 區塊
    利用HTML語法寫入行事曆 <div> 區塊,並將變數名稱設為'calendar',JavaScript在產生行事曆時,便會出現於此區塊。
  3. 撰寫JS和啟動FullCalendar
    FullCalendar啟動參數有很多種,可以依照開發者的需求來做調整,讓套件在使用上更加彈性。

JQuery FlotChart套件

JQuery FlotChart是由JQuery函式庫所提供的圖形套件,功用是在網頁上繪製圖表,而且其支援許多的圖形種類,以下為其使用方法:

  1. 嵌入
    利用下載或使用CDN網址。
  2. 設定CSS
    利用CSS語法在<head>標籤內寫入設定圖型的大小和高度。
  3. 設定圖型<div>區塊
    利用HTML語法寫入圖型<div> 區塊,並將變數名稱設為'flotid',JQuery在產生圖表時,便會出現於此區塊。
  4. 撰寫JS和啟動FlotChart
    利用JavaScript寫入設定圖表資料,之後呼叫plot函式便會產生圖表。

上一篇
Day28 JQuery簡介
下一篇
Day30 ChatGPT在網頁前端的應用
系列文
新手踏入網頁前端的世界30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言